<template>
	<view>
		<view class="header">
			<image src="../../static/me.png"></image>
		</view>
		<view>
			<view class="from-item">
				<input placeholder="请输入用户名" v-model="username" />
			</view>
			<view class="from-item">
				<input placeholder="请输入密码" v-model="password" />
			</view>
			<view class="from-item">
				<button @click="login">登录</button>
			</view>
			<view class="from-item">
				<button @click="to">回到首页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import  {API_HOST}  from  '/config/const.js'
	
	import {
		ref
	} from 'vue';
	const username = ref('')
	const password = ref('')
	
	const to =()=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
	}

	const login = () => {
		uni.request({
			url: `${API_HOST}/members?username=${username.value}`, //仅为示例，并非真实接口地址。
			success: (res) => {
				if (res.data[0]) {
					if (res.data[0].password === password.value) {
						uni.setStorageSync("loginUser", JSON.stringify(res.data[0]))
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: '密码错误',
							duration: 2000,
							icon: 'error'
						})
					}
				} else {
					uni.showToast({
						title: '用户不存在',
						duration: 2000,
						icon: 'error'
					})
				}
			},
		})
	}
</script>

<style scoped>
	.header {
		display: flex;
		justify-content: center;
		height: 400rpx;
		align-items: center;
		align-content: baseline;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;

	}

	.from-item {
		height: 90rpx;
		background-color: antiquewhite;
		margin: 10rpx;
		padding: 10rpx;
		background-color: aliceblue;
	}

	.from-item button{
		border: 1px solid gainsboro;
		height: 90rpx;
		padding-left: 20px;
		background-color:royalblue
	}
</style>